// Images Directory
imagesDir = "/group/ui-component/textarea/icons/";

// CSS Directory
cssDir = "/group/ui-component/textarea/styles/";

// Popups Directory
popupsDir = "/group/ui-component/textarea/popups/";

// WYSIWYG Width and Height
textareaWidth = 600;
textareaHeight = 300;

// Include Style Sheet
document.write('<link rel="stylesheet" type="text/css" href="' + cssDir
		+ 'styles.css">\n');

/* ---------------------------------------------------------------------- *\
 Toolbar Settings: Set the features and buttons available in the WYSIWYG
 Toolbar.
 \* ---------------------------------------------------------------------- */

// List of available font types
var Fonts = new Array();
Fonts[0] = "Arial";
Fonts[1] = "Sans Serif";
Fonts[2] = "Tahoma";
Fonts[3] = "Verdana";
Fonts[4] = "Courier New";
Fonts[5] = "Georgia";
Fonts[6] = "Times New Roman";
Fonts[7] = "Impact";
Fonts[8] = "Comic Sans MS";

// List of available block formats (not in use)
var BlockFormats = new Array();
BlockFormats[0] = "Address";
BlockFormats[1] = "Bulleted List";
BlockFormats[2] = "Definition";
BlockFormats[3] = "Definition Term";
BlockFormats[4] = "Directory List";
BlockFormats[5] = "Formatted";
BlockFormats[6] = "Heading 1";
BlockFormats[7] = "Heading 2";
BlockFormats[8] = "Heading 3";
BlockFormats[9] = "Heading 4";
BlockFormats[10] = "Heading 5";
BlockFormats[11] = "Heading 6";
BlockFormats[12] = "Menu List";
BlockFormats[13] = "Normal";
BlockFormats[14] = "Numbered List";

// List of available font sizes
var FontSizes = new Array();
FontSizes[0] = "1";
FontSizes[1] = "2";
FontSizes[2] = "3";
FontSizes[3] = "4";
FontSizes[4] = "5";
FontSizes[5] = "6";
FontSizes[6] = "7";

// Order of available commands in toolbar one
var buttonName = new Array();
buttonName[0] = "bold";
buttonName[1] = "italic";
buttonName[2] = "underline";
//buttonName[3]  = "strikethrough";
buttonName[4] = "seperator";
buttonName[5] = "subscript";
buttonName[6] = "superscript";
buttonName[7] = "seperator";
buttonName[8] = "justifyleft";
buttonName[9] = "justifycenter";
buttonName[10] = "justifyright";
buttonName[11] = "seperator";
buttonName[12] = "unorderedlist";
buttonName[13] = "orderedlist";
//buttonName[14] = "outdent";
//buttonName[15] = "indent";

// Order of available commands in toolbar two
var buttonName2 = new Array();
//buttonName2[0]  = "forecolor";
//buttonName2[1]  = "backcolor";
//buttonName2[2]  = "seperator";
	//buttonName2[3]  = "cut";
	//buttonName2[4]  = "copy";
	//buttonName2[5]  = "paste";
	//buttonName2[6]  = "seperator";
  //buttonName2[7]  = "undo";
	//buttonName2[8]  = "redo";
  //buttonName2[9]  = "seperator";
	//buttonName2[10]  = "inserttable";
  //buttonName2[11]  = "insertimage";
 // buttonName2[12]  = "createlink";
	//buttonName2[13]  = "seperator";
	buttonName2[14]  = "viewSource";
	//buttonName2[15]  = "seperator";
  ////buttonName2[16]  = "help";
	
// List of available actions and their respective ID and images
var ToolbarList = {
	//Name              buttonID                 buttonTitle           buttonImage                            buttonImageRollover
	"bold" : [ 'Bold', 'Bold', imagesDir + 'bold.gif',
			imagesDir + 'bold_on.gif' ],
	"italic" : [ 'Italic', 'Italic', imagesDir + 'italics.gif',
			imagesDir + 'italics_on.gif' ],
	"underline" : [ 'Underline', 'Underline', imagesDir + 'underline.gif',
			imagesDir + 'underline_on.gif' ],
	"strikethrough" : [ 'Strikethrough', 'Strikethrough',
			imagesDir + 'strikethrough.gif', imagesDir + 'strikethrough_on.gif' ],
	"seperator" : [ '', '', imagesDir + 'seperator.gif',
			imagesDir + 'seperator.gif' ],
	"subscript" : [ 'Subscript', 'Subscript', imagesDir + 'subscript.gif',
			imagesDir + 'subscript_on.gif' ],
	"superscript" : [ 'Superscript', 'Superscript',
			imagesDir + 'superscript.gif', imagesDir + 'superscript_on.gif' ],
	"justifyleft" : [ 'Justifyleft', 'Justifyleft',
			imagesDir + 'justify_left.gif', imagesDir + 'justify_left_on.gif' ],
	"justifycenter" : [ 'Justifycenter', 'Justifycenter',
			imagesDir + 'justify_center.gif',
			imagesDir + 'justify_center_on.gif' ],
	"justifyright" : [ 'Justifyright', 'Justifyright',
			imagesDir + 'justify_right.gif', imagesDir + 'justify_right_on.gif' ],
	"unorderedlist" : [ 'InsertUnorderedList', 'InsertUnorderedList',
			imagesDir + 'list_unordered.gif',
			imagesDir + 'list_unordered_on.gif' ],
	"orderedlist" : [ 'InsertOrderedList', 'InsertOrderedList',
			imagesDir + 'list_ordered.gif', imagesDir + 'list_ordered_on.gif' ],
	"outdent" : [ 'Outdent', 'Outdent', imagesDir + 'indent_left.gif',
			imagesDir + 'indent_left_on.gif' ],
	"indent" : [ 'Indent', 'Indent', imagesDir + 'indent_right.gif',
			imagesDir + 'indent_right_on.gif' ],
	"cut" : [ 'Cut', 'Cut', imagesDir + 'cut.gif', imagesDir + 'cut_on.gif' ],
	"copy" : [ 'Copy', 'Copy', imagesDir + 'copy.gif',
			imagesDir + 'copy_on.gif' ],
	"paste" : [ 'Paste', 'Paste', imagesDir + 'paste.gif',
			imagesDir + 'paste_on.gif' ],
	"forecolor" : [ 'ForeColor', 'ForeColor', imagesDir + 'forecolor.gif',
			imagesDir + 'forecolor_on.gif' ],
	"backcolor" : [ 'BackColor', 'BackColor', imagesDir + 'backcolor.gif',
			imagesDir + 'backcolor_on.gif' ],
	"undo" : [ 'Undo', 'Undo', imagesDir + 'undo.gif',
			imagesDir + 'undo_on.gif' ],
	"redo" : [ 'Redo', 'Redo', imagesDir + 'redo.gif',
			imagesDir + 'redo_on.gif' ],
	"inserttable" : [ 'InsertTable', 'InsertTable',
			imagesDir + 'insert_table.gif', imagesDir + 'insert_table_on.gif' ],
	"insertimage" : [ 'InsertImage', 'InsertImage',
			imagesDir + 'insert_picture.gif',
			imagesDir + 'insert_picture_on.gif' ],
	"createlink" : [ 'CreateLink', 'CreateLink',
			imagesDir + 'insert_hyperlink.gif',
			imagesDir + 'insert_hyperlink_on.gif' ],
	"viewSource" : [ 'ViewSource', 'ViewSource', imagesDir + 'view_source.gif',
			imagesDir + 'view_source_on.gif' ],
	"viewText" : [ 'ViewText', 'ViewText', imagesDir + 'view_text.gif',
			imagesDir + 'view_text_on.gif' ],
	"help" : [ 'Help', 'Help', imagesDir + 'help.gif',
			imagesDir + 'help_on.gif' ]
};

/* ---------------------------------------------------------------------- *\
 Function    : insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
 Description : Emulates insertAdjacentHTML(), insertAdjacentText() and 
 insertAdjacentElement() three functions so they work with 
 Netscape 6/Mozilla
 Notes       : by Thor Larholm me@jscript.dk
 \* ---------------------------------------------------------------------- */
if (typeof HTMLElement != "undefined"
		&& !HTMLElement.prototype.insertAdjacentElement) {
	HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
		switch (where) {
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode, this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode, this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling)
				this.parentNode.insertBefore(parsedNode, this.nextSibling);
			else
				this.parentNode.appendChild(parsedNode);
			break;
		}
	}

	HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where, parsedHTML)
	}

	HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where, parsedText)
	}
};

// Create viewTextMode global variable and set to 0
// enabling all toolbar commands while in HTML mode
viewTextMode = 0;

/* ---------------------------------------------------------------------- *\
 Function    : generate_textarea()
 Description : replace textarea with textarea editor
 Usage       : generate_textarea("textarea_id");
 Arguments   : textarea_id - ID of textarea to replace
 \* ---------------------------------------------------------------------- */
function generate_textarea(textareaID) {

	// Pass the textareaID to the "n" variable.
	var n = textareaID;

	// Toolbars width is 2 pixels wider than the textareas
	toolbarWidth = parseFloat(textareaWidth) + 2;

	// Generate WYSIWYG toolbar one
	var toolbar;
	toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar1" style="width:'
			+ toolbarWidth
			+ ';"><tr><td width="6"><img src="'
			+ imagesDir
			+ 'seperator2.gif" alt="" hspace="3"></td>';

	// Create IDs for inserting Font Type and Size drop downs
	toolbar += '<td width="90"><span id="FontSelect' + n + '"></span></td>';
	toolbar += '<td width="60"><span id="FontSizes' + n + '"></span></td>';

	// Output all command buttons that belong to toolbar one
	for ( var i = 0; i <= buttonName.length;) {
		if (buttonName[i]) {
			var buttonObj = ToolbarList[buttonName[i]];
			var buttonID = buttonObj[0];
			var buttonTitle = buttonObj[1];
			var buttonImage = buttonObj[2];
			var buttonImageRollover = buttonObj[3];

			if (buttonName[i] == "seperator") {
				toolbar += '<td width="12" align="center"><img src="'
						+ buttonImage
						+ '" border=0 unselectable="on" width="2" height="18" hspace="2"></td>';
			} else {
				toolbar += '<td width="22"><img src="'
						+ buttonImage
						+ '" border=0 unselectable="on" title="'
						+ buttonTitle
						+ '" id="'
						+ buttonID
						+ '" class="button" onClick="formatText(this.id,\''
						+ n
						+ '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\''
						+ buttonImageRollover
						+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\''
						+ buttonImage
						+ '\';" unselectable="on"  width="20" height="20"></td>';
			}
		}
		i++;
	}

	toolbar += '<td>&nbsp;</td></tr></table>';

	// Generate WYSIWYG toolbar two
	var toolbar2;
	toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:'
			+ toolbarWidth
			+ ';"><tr><td width="6"><img src="'
			+ imagesDir
			+ 'seperator2.gif" alt="" hspace="3"></td>';

	// Output all command buttons that belong to toolbar two
	for ( var j = 0; j <= buttonName2.length;) {
		if (buttonName2[j]) {
			var buttonObj = ToolbarList[buttonName2[j]];
			var buttonID = buttonObj[0];
			var buttonTitle = buttonObj[1];
			var buttonImage = buttonObj[2];
			var buttonImageRollover = buttonObj[3];

			if (buttonName2[j] == "seperator") {
				toolbar2 += '<td width="12" align="center"><img src="'
						+ buttonImage
						+ '" border=0 unselectable="on" width="2" height="18" hspace="2"></td>';
			} else if (buttonName2[j] == "viewSource") {
				toolbar2 += '<td width="22">';
				toolbar2 += '<span id="HTMLMode'
						+ n
						+ '"><img src="'
						+ buttonImage
						+ '" border=0 unselectable="on" title="'
						+ buttonTitle
						+ '" id="'
						+ buttonID
						+ '" class="button" onClick="formatText(this.id,\''
						+ n
						+ '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\''
						+ buttonImageRollover
						+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\''
						+ buttonImage
						+ '\';" unselectable="on"  width="20" height="20"></span>';
				toolbar2 += '<span id="textMode'
						+ n
						+ '"><img src="'
						+ imagesDir
						+ 'view_text.gif" border=0 unselectable="on" title="viewText"          id="ViewText"       class="button" onClick="formatText(this.id,\''
						+ n
						+ '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\''
						+ imagesDir
						+ 'view_text_on.gif\';"    onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\''
						+ imagesDir
						+ 'view_text.gif\';" unselectable="on"  width="20" height="20"></span>';
				toolbar2 += '</td>';
			} else {
				toolbar2 += '<td width="22"><img src="'
						+ buttonImage
						+ '" border=0 unselectable="on" title="'
						+ buttonTitle
						+ '" id="'
						+ buttonID
						+ '" class="button" onClick="formatText(this.id,\''
						+ n
						+ '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\''
						+ buttonImageRollover
						+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\''
						+ buttonImage
						+ '\';" unselectable="on"  width="20" height="20"></td>';
			}
		}
		j++;
	}

	toolbar2 += '<td>&nbsp;</td></tr></table>';

	// Create iframe which will be used for rich text editing
	var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:'
			+ textareaWidth
			+ '; height:'
			+ textareaHeight
			+ ';border: 1px inset #CCCCCC;"><tr><td valign="top">\n'
			+ '<iframe frameborder="0" id="textarea'
			+ n
			+ '"></iframe>\n'
			+ '</td></tr></table>\n';

	// Insert after the textArea both toolbar one and two
	document.all[n].insertAdjacentHTML("afterEnd", toolbar + toolbar2 + iframe);

	// Give the iframe the global textarea height and width
	document.getElementById("textarea" + n).style.height = textareaHeight;
	document.getElementById("textarea" + n).style.width = textareaWidth;

	// Pass the textarea's existing text over to the content variable
	var content = document.getElementById(n).value;

	var doc = document.getElementById("textarea" + n).contentWindow.document;

	// Write the textarea's content into the iframe
	doc.open();
	doc.write(content);
	doc.close();

	// Make the iframe editable in both Mozilla and IE
	doc.body.contentEditable = true;
	doc.designMode = "on";

	// When a user updates the content in the iframe update the 
	// textarea as well (note: causes undo not to work in IE)
	var browserName = navigator.appName;
	if (browserName == "Microsoft Internet Explorer") {
		doc.onkeyup = function() {
			updateTextArea(n);
		}
	} else {
		doc.addEventListener('keyup', function OnKeyUp() {
			updateTextArea(n);
		}, true);
	}

	// Hide the textarea 
	document.getElementById(n).style.display = 'none';

	// Insert the Font Type and Size drop downs into the toolbar
	outputFontSelect(n);
	outputFontSizes(n);

	// Hide the dynamic drop down lists for the Font Types and Sizes
	hideFonts(n);
	hideFontSizes(n);

	// Hide the "Text Mode" button
	document.getElementById("textMode" + n).style.display = 'none';
};

/* ---------------------------------------------------------------------- *\
 Function    : formatText()
 Description : replace textarea with textarea editor
 Usage       : formatText(id, n, selected);
 Arguments   : id - The execCommand (e.g. Bold)
 n  - The editor identifier that the command 
 affects (the textarea's ID)
 selected - The selected value when applicable (e.g. Arial)
 \* ---------------------------------------------------------------------- */
function formatText(id, n, selected) {

	// When user clicks toolbar button make sure it always targets its respective WYSIWYG
	document.getElementById("textarea" + n).contentWindow.focus();

	// When in Text Mode these execCommands are disabled
	var formatIDs = new Array("FontSize", "FontName", "Bold", "Italic",
			"Underline", "Subscript", "Superscript", "Strikethrough",
			"Justifyleft", "Justifyright", "Justifycenter",
			"InsertUnorderedList", "InsertOrderedList", "Indent", "Outdent",
			"ForeColor", "BackColor", "InsertImage", "InsertTable",
			"CreateLink");

	// Check if button clicked is in disabled list
	for ( var i = 0; i <= formatIDs.length;) {
		if (formatIDs[i] == id) {
			var disabled_id = 1;
		}
		i++;
	}

	// Check if in Text Mode and disabled button was clicked
	if (viewTextMode == 1 && disabled_id == 1) {
		alert("You are in HTML Mode. This feature has been disabled.");
	}

	else {

		// FontSize
		if (id == "FontSize") {
			document.getElementById("textarea" + n).contentWindow.document
					.execCommand("FontSize", false, selected);
		}

		// FontName
		else if (id == "FontName") {
			document.getElementById("textarea" + n).contentWindow.document
					.execCommand("FontName", false, selected);
		}

		// ForeColor and BackColor
		else if (id == 'ForeColor' || id == 'BackColor') {
			var w = screen.availWidth;
			var h = screen.availHeight;
			var popW = 210, popH = 165;
			var leftPos = (w - popW) / 2, topPos = (h - popH) / 2;
			var currentColor = _dec_to_rgb(document.getElementById("textarea"
					+ n).contentWindow.document.queryCommandValue(id));

			window.open(popupsDir + 'select_color.html?color=' + currentColor
					+ '&command=' + id + '&textarea=' + n, 'popup',
					'location=0,status=0,scrollbars=0,width=' + popW
							+ ',height=' + popH + ',top=' + topPos + ',left='
							+ leftPos);
		}

		// InsertImage
		else if (id == "InsertImage") {
			window
					.open(popupsDir + 'insert_image.html?textarea=' + n,
							'popup',
							'location=0,status=0,scrollbars=0,resizable=0,width=400,height=190');
		}

		// InsertTable
		else if (id == "InsertTable") {
			window
					.open(popupsDir + 'create_table.html?textarea=' + n,
							'popup',
							'location=0,status=0,scrollbars=0,resizable=0,width=400,height=360');
		}

		// CreateLink
		else if (id == "CreateLink") {
			window
					.open(popupsDir + 'insert_hyperlink.html?textarea=' + n,
							'popup',
							'location=0,status=0,scrollbars=0,resizable=0,width=300,height=110');
		}

		// ViewSource
		else if (id == "ViewSource") {
			viewSource(n);
		}

		// ViewText
		else if (id == "ViewText") {
			viewText(n);
		}

		// Help
		else if (id == "Help") {
			window
					.open(popupsDir + 'about.html', 'popup',
							'location=0,status=0,scrollbars=0,resizable=0,width=400,height=330');
		}

		// Every other command
		else {
			document.getElementById("textarea" + n).contentWindow.document
					.execCommand(id, false, null);
		}
	}

	// Update the textarea when user updates respective WYSIWYG
	updateTextArea(n);
};

/* ---------------------------------------------------------------------- *\
 Function    : insertHTML()
 Description : insert HTML into WYSIWYG in rich text
 Usage       : insertHTML(<b>hello</b>, "textareaID")
 Arguments   : html - The HTML being inserted (e.g. <b>hello</b>)
 n  - The editor identifier that the HTML 
 will be inserted into (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function insertHTML(html, n) {

	var browserName = navigator.appName;

	if (browserName == "Microsoft Internet Explorer") {
		document.all['textarea' + n].contentWindow.document.selection
				.createRange().pasteHTML(html);
	}

	else {
		var div = document.all['textarea' + n].contentWindow.document
				.createElement("div");

		div.innerHTML = html;
		var node = insertNodeAtSelection(div, n);
	}

}

/* ---------------------------------------------------------------------- *\
 Function    : insertNodeAtSelection()
 Description : insert HTML into WYSIWYG in rich text (mozilla)
 Usage       : insertNodeAtSelection(insertNode, n)
 Arguments   : insertNode - The HTML being inserted (must be innerHTML 
 inserted within a div element)
 n          - The editor identifier that the HTML will be 
 inserted into (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function insertNodeAtSelection(insertNode, n) {
	// get current selection
	var sel = document.all['textarea' + n].contentWindow.getSelection();

	// get the first range of the selection
	// (there's almost always only one range)
	var range = sel.getRangeAt(0);

	// deselect everything
	sel.removeAllRanges();

	// remove content of current selection from document
	range.deleteContents();

	// get location of current selection
	var container = range.startContainer;
	var pos = range.startOffset;

	// make a new range for the new selection
	range = document.createRange();

	if (container.nodeType == 3 && insertNode.nodeType == 3) {

		// if we insert text in a textnode, do optimized insertion
		container.insertData(pos, insertNode.nodeValue);

		// put cursor after inserted text
		range.setEnd(container, pos + insertNode.length);
		range.setStart(container, pos + insertNode.length);
	}

	else {
		var afterNode;

		if (container.nodeType == 3) {
			// when inserting into a textnode
			// we create 2 new textnodes
			// and put the insertNode in between

			var textNode = container;
			container = textNode.parentNode;
			var text = textNode.nodeValue;

			// text before the split
			var textBefore = text.substr(0, pos);
			// text after the split
			var textAfter = text.substr(pos);

			var beforeNode = document.createTextNode(textBefore);
			afterNode = document.createTextNode(textAfter);

			// insert the 3 new nodes before the old one
			container.insertBefore(afterNode, textNode);
			container.insertBefore(insertNode, afterNode);
			container.insertBefore(beforeNode, insertNode);

			// remove the old node
			container.removeChild(textNode);
		}

		else {
			// else simply insert the node
			afterNode = container.childNodes[pos];
			container.insertBefore(insertNode, afterNode);
		}

		range.setEnd(afterNode, 0);
		range.setStart(afterNode, 0);
	}

	sel.addRange(range);
};

/* ---------------------------------------------------------------------- *\
 Function    : _dec_to_rgb
 Description : convert a decimal color value to rgb hexadecimal
 Usage       : var hex = _dec_to_rgb('65535');   // returns FFFF00
 Arguments   : value   - dec value
 \* ---------------------------------------------------------------------- */

function _dec_to_rgb(value) {
	var hex_string = "";
	for ( var hexpair = 0; hexpair < 3; hexpair++) {
		var myByte = value & 0xFF; // get low byte
		value >>= 8; // drop low byte
		var nybble2 = myByte & 0x0F; // get low nybble (4 bits)
		var nybble1 = (myByte >> 4) & 0x0F; // get high nybble
		hex_string += nybble1.toString(16); // convert nybble to hex
		hex_string += nybble2.toString(16); // convert nybble to hex
	}
	return hex_string.toUpperCase();
};

/* ---------------------------------------------------------------------- *\
 Function    : outputFontSelect()
 Description : creates the Font Select drop down and inserts it into 
 the toolbar
 Usage       : outputFontSelect(n)
 Arguments   : n   - The editor identifier that the Font Select will update
 when making font changes (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function outputFontSelect(n) {
	Fonts.sort();
	var FontSelectDropDown = new Array;
	FontSelectDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectFont'
			+ n
			+ '\').src=\''
			+ imagesDir
			+ 'select_font_on.gif\';" onMouseOut="document.getElementById(\'selectFont'
			+ n
			+ '\').src=\''
			+ imagesDir
			+ 'select_font.gif\';"><img src="'
			+ imagesDir
			+ 'select_font.gif" id="selectFont'
			+ n
			+ '" width="85" height="20" onClick="showFonts(\''
			+ n
			+ '\');"><br>';
	FontSelectDropDown[n] += '<span id="Fonts' + n
			+ '" class="dropdown" style="width: 145px;">';

	for ( var i = 0; i <= Fonts.length;) {
		if (Fonts[i]) {
			FontSelectDropDown[n] += '<button type="button" onClick="formatText(\'FontName\',\''
					+ n
					+ '\',\''
					+ Fonts[i]
					+ '\')\;hideFonts(\''
					+ n
					+ '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 120px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family:'
					+ Fonts[i]
					+ '; font-size: 12px;">'
					+ Fonts[i]
					+ '</td></tr></table></button><br>';
		}
		i++;
	}
	FontSelectDropDown[n] += '</span></td></tr></table>';
	document.all['FontSelect' + n].insertAdjacentHTML("afterBegin",
			FontSelectDropDown[n]);
};

/* ---------------------------------------------------------------------- *\
 Function    : outputFontSizes()
 Description : creates the Font Sizes drop down and inserts it into 
 the toolbar
 Usage       : outputFontSelect(n)
 Arguments   : n   - The editor identifier that the Font Sizes will update
 when making font changes (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function outputFontSizes(n) {
	FontSizes.sort();
	var FontSizesDropDown = new Array;
	FontSizesDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectSize'
			+ n
			+ '\').src=\''
			+ imagesDir
			+ 'select_size_on.gif\';" onMouseOut="document.getElementById(\'selectSize'
			+ n
			+ '\').src=\''
			+ imagesDir
			+ 'select_size.gif\';"><img src="'
			+ imagesDir
			+ 'select_size.gif" id="selectSize'
			+ n
			+ '" width="49" height="20" onClick="showFontSizes(\''
			+ n
			+ '\');"><br>';
	FontSizesDropDown[n] += '<span id="Sizes' + n
			+ '" class="dropdown" style="width: 170px;">';

	for ( var i = 0; i <= FontSizes.length;) {
		if (FontSizes[i]) {
			FontSizesDropDown[n] += '<button type="button" onClick="formatText(\'FontSize\',\''
					+ n
					+ '\',\''
					+ FontSizes[i]
					+ '\')\;hideFontSizes(\''
					+ n
					+ '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 145px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family: arial, verdana, helvetica;"><font size="'
					+ FontSizes[i]
					+ '">size '
					+ FontSizes[i]
					+ '</font></td></tr></table></button><br>';
		}
		i++;
	}
	FontSizesDropDown[n] += '</span></td></tr></table>';
	document.all['FontSizes' + n].insertAdjacentHTML("afterBegin",
			FontSizesDropDown[n]);
};

/* ---------------------------------------------------------------------- *\
 Function    : hideFonts()
 Description : Hides the list of font names in the font select drop down
 Usage       : hideFonts(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function hideFonts(n) {
	document.getElementById('Fonts' + n).style.display = 'none';
};

/* ---------------------------------------------------------------------- *\
 Function    : hideFontSizes()
 Description : Hides the list of font sizes in the font sizes drop down
 Usage       : hideFontSizes(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function hideFontSizes(n) {
	document.getElementById('Sizes' + n).style.display = 'none';
};

/* ---------------------------------------------------------------------- *\
 Function    : showFonts()
 Description : Shows the list of font names in the font select drop down
 Usage       : showFonts(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function showFonts(n) {
	if (document.getElementById('Fonts' + n).style.display == 'block') {
		document.getElementById('Fonts' + n).style.display = 'none';
	} else {
		document.getElementById('Fonts' + n).style.display = 'block';
		document.getElementById('Fonts' + n).style.position = 'absolute';
	}
};

/* ---------------------------------------------------------------------- *\
 Function    : showFontSizes()
 Description : Shows the list of font sizes in the font sizes drop down
 Usage       : showFonts(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function showFontSizes(n) {
	if (document.getElementById('Sizes' + n).style.display == 'block') {
		document.getElementById('Sizes' + n).style.display = 'none';
	} else {
		document.getElementById('Sizes' + n).style.display = 'block';
		document.getElementById('Sizes' + n).style.position = 'absolute';
	}
};

/* ---------------------------------------------------------------------- *\
 Function    : viewSource()
 Description : Shows the HTML source code generated by the WYSIWYG editor
 Usage       : showFonts(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function viewSource(n) {
	var getDocument = document.getElementById("textarea" + n).contentWindow.document;
	var browserName = navigator.appName;

	// View Source for IE 	 
	if (browserName == "Microsoft Internet Explorer") {
		var iHTML = getDocument.body.innerHTML;
		getDocument.body.innerText = iHTML;
	}

	// View Source for Mozilla/Netscape
	else {
		var html = document.createTextNode(getDocument.body.innerHTML);
		getDocument.body.innerHTML = "";
		getDocument.body.appendChild(html);
	}

	// Hide the HTML Mode button and show the Text Mode button
	document.getElementById('HTMLMode' + n).style.display = 'none';
	document.getElementById('textMode' + n).style.display = 'block';

	// set the font values for displaying HTML source
	getDocument.body.style.fontSize = "11px";
	getDocument.body.style.fontFamily = "Courier New";

	viewTextMode = 1;
};

/* ---------------------------------------------------------------------- *\
 Function    : viewSource()
 Description : Shows the HTML source code generated by the WYSIWYG editor
 Usage       : showFonts(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function viewText(n) {
	var getDocument = document.getElementById("textarea" + n).contentWindow.document;
	var browserName = navigator.appName;

	// View Text for IE 	  	 
	if (browserName == "Microsoft Internet Explorer") {
		var iText = getDocument.body.innerText;
		getDocument.body.innerHTML = iText;
	}

	// View Text for Mozilla/Netscape
	else {
		var html = getDocument.body.ownerDocument.createRange();
		html.selectNodeContents(getDocument.body);
		getDocument.body.innerHTML = html.toString();
	}

	// Hide the Text Mode button and show the HTML Mode button
	document.getElementById('textMode' + n).style.display = 'none';
	document.getElementById('HTMLMode' + n).style.display = 'block';

	// reset the font values
	getDocument.body.style.fontSize = "";
	getDocument.body.style.fontFamily = "";
	viewTextMode = 0;
};

/* ---------------------------------------------------------------------- *\
 Function    : updateTextArea()
 Description : Updates the text area value with the HTML source of the WYSIWYG
 Usage       : updateTextArea(n)
 Arguments   : n   - The editor identifier (the textarea's ID)
 \* ---------------------------------------------------------------------- */
function updateTextArea(n) {
	document.getElementById(n).value = document.getElementById("textarea" + n).contentWindow.document.body.innerHTML;
};
